<template>
    <div class="details">
        <el-row>
            <el-col :span="12 " class="right">
                <div class="top" >
                    <p class="title">美颂花园</p>
                    <div class="content">
                        <img src="../../assets/img/Equipment_img/landmark.png" alt="" class="landmark">
                        <span class="area">江苏省苏州市苏州工业园区园区八达街99号(星湖街与创苑路交汇处)</span>
                    </div>
                </div>
                <hr/>
                <div class="describe">
                    <el-descriptions  :column="1" >
                        <el-descriptions-item label="所属街道"><span class="describe_item">独墅湖街道</span></el-descriptions-item>
                        <el-descriptions-item label="建成年代"><span class="describe_item">2018</span></el-descriptions-item>
                        <el-descriptions-item label="建筑类型"><span class="describe_item">塔楼/板楼</span></el-descriptions-item>
                        <el-descriptions-item label="开发企业"><span class="describe_item">****公司</span></el-descriptions-item>
                        <el-descriptions-item label="交易权属"><span class="describe_item">商品房/使用权</span></el-descriptions-item>
                    </el-descriptions>
                </div>
                <div class="card">
                    <img src="../../assets/img/Equipment_img/card.png" alt="" class="cardImg">
                    <div class="card-card">
                        <p>苏州新城悦物业服务有限公司</p>
                        <div class="card-card2">
                            <img src="../../assets/img/Equipment_img/tell.png" alt="" class="tell">
                            <span>0512-67777776</span>
                        </div>
                    </div>
                </div>
            </el-col>
            <el-col :span="12">
                <div id="allmap"></div>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="12"><div class="grid-content bg-purple">111</div></el-col>
            <el-col :span="12">
                <div id="myChart" :style="{width: '300px', height: '40px'}"></div>
            </el-col>
        </el-row>
    </div>
</template>


<script>
    export default {
        mounted(){
            this.drawLine()
            // this.loadJScript()
        },
        methods:{
            // loadJScript() {
            //     var script = document.createElement('script');
            //     script.type = 'text/javascript';
            //     // 4ifq8NFNs6FGkpd2mwkilem1hbExWX6x
            //     // script.src = '//api.map.baidu.com/api?type=webgl&v=1.0&ak=4ifq8NFNs6FGkpd2mwkilem1hbExWX6x&callback=init';
            //     script.src = '//api.map.baidu.com/api?v=3.0&ak=4ifq8NFNs6FGkpd2mwkilem1hbExWX6x';
            //     script.onload=()=>{
            //       init();
            //     };
            //     document.body.appendChild(script);
            // },
            // init() {
            //
            //     // 百度地图API功能
            //     var map = new window.BMap.Map("allmap");    // 创建Map实例
            //     map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);  // 初始化地图,设置中心点坐标和地图级别
            //     map.setCurrentCity("北京");          // 设置地图显示的城市 此项是必须设置的
            //     map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
            // },



            drawLine(){
                // 基于准备好的dom，初始化echarts实例
                let myChart = this.$echarts.init(document.getElementById('myChart'))
                // 绘制图表
                myChart.setOption({
                    // title: { text: '在Vue中使用echarts' },
                    tooltip: {},
                    xAxis: {
                        type: 'category',
                        show: false
                        // data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
                    },
                    // axisLine: {
                    //     show: false,
                    //     lineStyle: {
                    //
                    //     }
                    // },
                    yAxis: {
                        show: false,
                        type:'value',
                        // min: 0,
                        // max: 100,
                        scale: true,
                        boundaryGap: [1, 0.1]
                    },
                    series: [
                        {
                            // name: '销量',
                            type: 'bar',
                            data: [50,100,50,100,50,100,200]
                        }
                    ]
                });
            },
        }
    }
</script>

<style scoped lang="less">
.details{
    padding: 40px;
    .right{
        display: flex;
        flex-direction: column;
        justify-content: center;
        .top{
            height: 80px;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            .content{
                display: flex;
                justify-content: flex-start;
            }
            .title{
                font-size: 20px;
                font-family: PingFang SC, PingFang SC-Heavy;
                font-weight: 800;
                text-align: left;
                color: #000000;
            }
            .landmark{
                width: 20px;
                height: 20px;

            }
            .area{
                font-size: 14px;
                font-family: PingFang SC, PingFang SC-Regular;
                font-weight: 400;
                color: #000000;
            }
        }
        .describe{
            .describe_item{
                font-size: 14px;
                font-family: PingFang SC, PingFang SC-Regular;
                font-weight: 400;
                text-align: left;
                color: #000000;
            }
        }
        .card{
            width: 382px;
            height: 100px;
            background: linear-gradient(132deg,#ff8139 2%, #ffaf80 98%);
            border-radius: 5px;
            display: flex;
            align-items: center;
            .cardImg{
                width: 64px;
                height: 64px;
                margin-left: 20px;
                margin-right: 12px;
            }
            .card-card{
                p{
                    font-size: 14px;
                    font-family: PingFang SC, PingFang SC-Bold;
                    font-weight: 700;
                    text-align: left;
                    color: #ffffff;
                }
                .card-card2{
                    width: 164px;
                    height: 30px;
                    background: #ffffff;
                    border-radius: 5px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    span{
                        font-size: 16px;
                        font-family: Futura, Futura-Heavy;
                        font-weight: 800;
                        text-align: left;
                        color: #ff8a47;
                        margin-left: 8px;
                    }
                }
            }
        }
    }
}
</style>
<style lang="less">
    body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
</style>
